<template>
    <div class="box">
        <!-- 头部 -->
        <div class="toubu">
            <van-icon name="wap-home-o" class="toubu_img1" />
            <div class="toubu_wb">值得买</div>
            <van-icon name="search" class="toubu_img2" />
            <van-icon name="cart-o" class="toubu_img3" />
        </div>
        <!-- 轮播图 -->
        <div class="zhongbu">
            <div class="zhongbu_fl">
                <img src="	https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" class="zhongbu_img1"
                    alt="">
                <div class="zhongbu_wb">严选好物 用心生活</div>
            </div>
            <van-swipe class="my-swipe" autoplay="5000" indicator-color="white" :width="90">
                <van-swipe-item>
                    <div class="er">
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <p class="my-swipe_er_wb1">窒息空间</p>
                            <p class="my-swipe_er_wb2"> 四月天</p>
                        </div>
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <div class="my-swipe_er_wb1">窒息空间</div>
                            <div class="my-swipe_er_wb2"> 四月天</div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="er">
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <p class="my-swipe_er_wb1">窒息空间</p>
                            <p class="my-swipe_er_wb2"> 四月天</p>
                        </div>
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <div class="my-swipe_er_wb1">窒息空间</div>
                            <div class="my-swipe_er_wb2"> 四月天</div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="er">
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <p class="my-swipe_er_wb1">窒息空间</p>
                            <p class="my-swipe_er_wb2"> 四月天</p>
                        </div>
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <div class="my-swipe_er_wb1">窒息空间</div>
                            <div class="my-swipe_er_wb2"> 四月天</div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="er">
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <p class="my-swipe_er_wb1">窒息空间</p>
                            <p class="my-swipe_er_wb2"> 四月天</p>
                        </div>
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <div class="my-swipe_er_wb1">窒息空间</div>
                            <div class="my-swipe_er_wb2"> 四月天</div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="er">
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <p class="my-swipe_er_wb1">窒息空间</p>
                            <p class="my-swipe_er_wb2"> 四月天</p>
                        </div>
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <div class="my-swipe_er_wb1">窒息空间</div>
                            <div class="my-swipe_er_wb2"> 四月天</div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="er">
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <p class="my-swipe_er_wb1">窒息空间</p>
                            <p class="my-swipe_er_wb2"> 四月天</p>
                        </div>
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <div class="my-swipe_er_wb1">窒息空间</div>
                            <div class="my-swipe_er_wb2"> 四月天</div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="er">
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <p class="my-swipe_er_wb1">窒息空间</p>
                            <p class="my-swipe_er_wb2"> 四月天</p>
                        </div>
                        <div class="my-swipe_er">
                            <img src="../../assets/logo.png" class="my-swipe_er_img">
                            <div class="my-swipe_er_wb1">窒息空间</div>
                            <div class="my-swipe_er_wb2"> 四月天</div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--瀑布流 -->
        <div class="pbl">
            <div class="box">
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/static-union/16564097538f53a1.jpg?imageView&thumbnail=345y191.66666666666669&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/static-union/1650444663e61d75.jpg?imageView&thumbnail=345y345&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/41150b6c9ac656ec0070bbbf5047fecc.jpeg?imageView&thumbnail=345y613.3333333333333&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/static-union/1645171680a9f198.jpg?imageView&thumbnail=345y345&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/0e22ee85467ef7b3b48d3a2a73cf94ee.jpeg?imageView&thumbnail=345y191.66666666666669&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/70fd143f11b9ecf5b9fb18b3134b2bf0.jpeg?imageView&thumbnail=345y345&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/66ee75ec08fd226494eff16726b95170.jpeg?imageView&thumbnail=345y191.66666666666669&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/eda1d1b36b2c95941fdd7cc67c1e1414.jpeg?imageView&thumbnail=345y191.66666666666669&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/bde7ea6d08e9b91a56eba2f26e6e549d.jpeg?imageView&thumbnail=345y345&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="https://yanxuan.nosdn.127.net/8c9962300dd4e9399168bcfbf749b1cd.jpg?imageView&thumbnail=345y258.75&quality=85" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="../../assets/logo.png" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="../../assets/logo.png" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="er">
                        <img src="../../assets/logo.png" class="er_img1" />
                        <div class="er_wb">春夏换新榜</div>
                        <div class="er_er">
                            <div class="aaa">
                                <img src="https://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                                    class="er_er_img1">
                                <div class="er_er_wb1">好物打赏</div>

                            </div>
                            <div class="bbb">
                                <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                                    class="er_er_img2">
                                <div class="er_er_wb2">40k</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

    <script>

</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;

    .toubu {
        width: 100%;
        height: 1.3333rem;
        display: flex;
        align-items: center;
        margin: 0 auto;
        overflow: hidden;
        border-bottom: .0267rem solid #aaa;
        border-top: .0267rem solid #aaa;

        .toubu_img1 {
            margin: 0 .5333rem;
            font-size: .8rem;
        }

        .toubu_wb {
            text-align: center;
            flex: 1;
            font-size: .45rem;
        }

        .toubu_img2 {
            font-size: .8rem;

        }

        .toubu_img3 {
            font-size: 30;
        }
    }

    .zhongbu {
        width: 100%;
        height: 6.9067rem;
        background-image: url(https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView);

        .zhongbu_fl {
            display: flex;
            padding-top: 1.0667rem;

            .zhongbu_img1 {
                width: 1.7333rem;
                height: .9333rem;
            }

            .zhongbu_wb {
                font-size: .4rem;
                margin: .2667rem;
                color: aliceblue;
            }

        }

        .my-swipe {
            margin: .2667rem;
            border-radius: .2667rem;
            background-color: #fff;

            .van-swipe-item {
                color: #fff;
                text-align: center;
                width: 34.33%;

                .er {
                    width: 2.24rem;
                    height: 6.2667rem;

                }

                .my-swipe_er {
                    display: flex;
                    flex-direction: column;

                    .my-swipe_er_img {
                        width: 1.6rem;
                        height: 1.6rem;
                        text-align: center;
                        margin: 0 auto;

                    }

                    .my-swipe_er_wb1 {
                        font-size: .4rem;
                        height: .5333rem;
                        text-align: center;
                        line-height: .5333rem;
                        color: #000;
                    }

                    .my-swipe_er_wb2 {
                        font-size: .4rem;
                        text-align: center;
                        line-height: .5333rem;
                        margin-top: .2667rem;
                        color: #aaa;
                    }

                }
            }
        }
    }

    .pbl {
        height: 100%;
        background-color: #aaa;
        margin: 2.1333rem .2667rem;

        .box {
            display: flex;
            flex-flow: column wrap;
            height: 200vh;
            .item {
                margin: .2667rem;
                width: calc(100%/2 - .5333rem);

                .er_img1 {
                    width: 100%;
                    height: 100%;
                }

                .er_wb {
                    width: 4.56rem;
                    height: .7733rem;
                    font-size: .4rem;
                    line-height: .7467rem;
                }

                .er_er {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .aaa {
                        display: flex;
                        .er_er_img1 {
                            width: .64rem;
                            height: .64rem;
                            margin: 0 .2667rem;
                            border-radius: 50%;
                        }

                        .er_er_wb1 {
                            width: 1.28rem;
                            height: .64rem;
                            font-size: .32rem;
                            line-height: .64rem;
                        }
                    }

                    .bbb {
                        display: flex;
                        margin: 0 auto;
                        line-height: .7467rem;

                        .er_er_img2 {
                            width: .4267rem;
                            height: .4267rem;
                            margin: 0 auto;
                            line-height: .7467rem;
                        }

                        .er_er_wb2 {
                            width: .712rem;
                            height: .4267rem;
                            font-size: .24rem;
                        }
                    }
                }

            }
        }




    }
}
</style>